<template>
	<view :style="$store.state.skin">
		<view class="balance">
			<view class="label">我的余额（元）</view>
			<view class="number">{{ account_balance }}</view>
		</view>
		<!--  <view class="handle">
		    <view class="item" @click="navigateTo('/pages/wallet_money/wallet_money')">
		      <image src="../../static/mine/chongzhi2.png" mode="widthFix"></image>
		      <view>入金</view>
		    </view>
		    <view class="item" @click="navigateTo('/pages/cash/cash')">
		      <image src="../../static/mine/tixian2.png" mode="widthFix"></image>
		      <view>提现</view>
		    </view>
		  </view> -->
		<view class="tabs">
			<view class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="activeIndex = index">{{ tab }}</view>
		</view>
		<view class="record">
			<view class="record-item" v-show="tabs[activeIndex] == '全部' || item.memo.indexOf(tabs[activeIndex]) != -1" v-for="(item, index) in recordsCp" :key="index">
				<view class="row">
					<view class="key">生成时间</view>
					<view class="value" style="font-size: 12rpx">{{ timeFn(item.createtime * 1000) }}</view>
				</view>
				<view class="row">
					<view class="key">金额</view>
					<view class="value">{{ item.money }}</view>
				</view>
				<view class="row">
					<view class="key">用途</view>
					<view class="value">{{ item.memo }}</view>
				</view>
				<view class="row">
					<view class="key">余额</view>
					<view class="value">{{ item.before }}</view>
				</view>
			</view>
			<loading v-show="showLoading" />
			<!-- <view v-if="recordsCp.length == 0 && !showLoading" class="none">暂无更多数据</view> -->
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
export default {
	data() {
		return {
			tabs: ['全部', '保证金', '管理费', '余额收益'],
			recordsCp: [],
			activeIndex: 0,
			account_balance : 0
		};
	},
	onShow() {
		this.getList();
	},

	methods: {
		navigateTo(e) {
			uni.navigateTo({
				url: e
			});
		},
		timeFn(timestamp) {
			// 将时间戳转换为日期格式
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hours = date.getHours();
			const minutes = date.getMinutes();
			const seconds = date.getSeconds();

			// 获取到的日期格式为2021-08-06 09:50:35
			const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${
				seconds < 10 ? '0' : ''
			}${seconds}`;
			return formattedDate;
		},
		getList() {
			request
				.get('/api/pay/getLog', {
					page: 1,
					limit: 9999999
				})
				.then((res) => {
					this.recordsCp = res.data.log_list;
					this.account_balance = res.data.account_balance;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.balance {
	background-color: var(--mine-info);
	padding: 40rpx 40rpx;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	color: #fff;
	margin: 26rpx;
	padding-bottom: 30rpx;

	.label {
		font-size: 24rpx;
	}

	.number {
		font-size: 80rpx;
		font-family: 'sans-serif';
		margin-top: 10rpx;
	}
}

.handle {
	display: flex;
	justify-content: space-around;
	margin: 0 26rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 0 20rpx #e6e6e6;
	background: #fff;
	padding: 14rpx 0;

	.item {
		display: flex;
		align-items: center;
		font-size: 30rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
			margin-right: 20rpx;
		}
	}
}

.tabs {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	background: #eee;

	.tab {
		font-size: 28rpx;
		line-height: 80rpx;

		&.active {
			color: var(--mine-info);
			border-bottom: 4rpx solid var(--nav-bg);
		}
	}
}

.record {
	padding-bottom: 40rpx;
	.record-item {
		background-color: #fff;
		margin: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx #e6e6e6;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.row {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #999;
			width: 56%;
			height: 50rpx;
			&:nth-child(2n) {
				width: 44%;
			}
			.key {
				width: 120rpx;
				text-align: right;
				margin-right: 20rpx;
			}
		}
	}
}

.none {
	width: 100%;
	padding-top: 60rpx;
	padding-bottom: 40rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999999;
}
</style>
